{% extends 'base.html' %}
{% block title %}
    <title>登陆</title>
    <style type="text/css">
    body{
        background: #323542;
    }
    </style>
{% endblock %}

{% block container %}
    <!--主体-->
    <div class="login-box">
      <div class="lg-title">欢迎登陆积分商城</div>
      <div class="login-form">
        <form action="{% url 'accounts:user_login' %}?next={{ next_url }}" method="post">
          <div class="login-user-name common-div">
            <span class="eamil-icon common-icon">
              <img src="/static/images/eamil.png" />
            </span>
            <input
              type="text"
              name="username"
              value="{{ form.username.value|default_if_none:'' }}"
              placeholder="请输入您的手机号"
            />
          </div>
            {{ form.username.errors }}
          <div class="login-user-pasw common-div">
            <span class="pasw-icon common-icon">
              <img src="/static/images/password.png" />
            </span>
            <input
              type="password"
              name="password"
              value=""
              placeholder="请输入您的密码"
            />
          </div>
            {{ form.password.errors }}
          <div class="login-user-vcode common-div">
                    <div class="weui-cell__bd">
                       <input
                          type="text"
                          name="verify_code"
                          value=""
                          placeholder="请输入验证码"
                        />
                    </div>
            <div class="weui-cell__ft">
                <img class="verify-code-img"
                     style="width: 100%; height: 100%;"
                     src="{% url 'system:verify_code' %}"
                     data-src="{% url 'system:verify_code' %}" alt="验证码">
            </div>

          </div>
            {{ form.verify_code.errors }}
            {{ form.non_field_errors }}
            <button class="login-btn common-div" type="submit">登录</button>
{#          <a href="javascript:;" class="login-btn common-div">登陆</a>#}
          <a href="javascript:;" class="login-oth-btn common-div">微信登陆</a>
          <a href="javascript:;" class="login-oth-btn common-div">QQ登陆</a>
        </form>
      </div>
      <div class="forgets">
        <a href="pwd_change.html">忘记密码？</a>
        <a href="{% url 'accounts:user_register' %}">免费注册</a>
      </div>
    </div>

{% endblock %}
{% block footer %}
    <script>
        $('.verify-code-img').click(function(){
            $(this).attr('src', $(this).attr('data-src') + '?t=' + new Date().getTime())
        })
    </script>
{% endblock %}